<template>
	<div>
		<van-popup class="article-dialog" position="bottom" closeable v-model="show">
			<div class="article-dialog-wrapper">
				<div class="article-dialog__box">
					<div class="article-dialog__info">
						<img
							class="article-dialog__info-cover"
							src="https://via.placeholder.com/240x320"
							mode="cover"
						/>
						<div class="article-dialog__info-content">
							<div class="book-title">Placeholder</div>
							<div class="book-author">
								<span>
									<i>作者：</i>劉智愛 & 林型
								</span>
							</div>
						</div>
					</div>
					<div class="article-dialog__buy">
						<van-cell icon="diamond" center title="自动购买下一话">
							<van-switch slot="right-icon" size="24" />
						</van-cell>
					</div>
					<div class="article-dialog__action">
						<div class="article-dialog__action-item">上一话</div>
						<div class="article-dialog__action-item">下一话</div>
					</div>
				</div>
			</div>
            <van-icon name="wap-nav" @click="showCatalog" />
		</van-popup>

        <van-popup class="article-catalog" position="left" v-model="catalog">
            <van-cell v-for="i in 32" :key="i" :title="'第'+ i++ +'话'" value="限免" is-link />
        </van-popup>

		<div class="article-view">
			<img src="https://via.placeholder.com/750x6000" alt />
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
            show: '',
            catalog: false,
		};
    },
    methods: {
        showCatalog() {
            this.catalog = true;
        }
    }
};
</script>